<template>
  <div>
    <Header />
    <div class="container mt-8">
      <div class="content" v-if="flag.success">
        <img src="@/assets/img/icon.png" class="pic" />
        <div class="notice"> Felicitaciones, se han completado todos los pasos, puede hacer clic en el préstamo a continuación. </div>
        <div class="action-btn" @click="jump2home">Ir a préstamo</div>
      </div>
      <div v-else>
        <el-steps ref="steps" v-if="!flag.isMobile" :active="activeStep" finish-status="success" align-center>
          <el-step title="Información personal"></el-step>
          <el-step title="Información familiar"></el-step>
          <el-step title="Información de antecedentes"></el-step>
          <!-- <el-step title="Documentación personal"></el-step> -->
          <el-step title="Información bancaria"></el-step>
          <el-step title="Autorización de débito"></el-step>
        </el-steps>

        <div v-loading="flag.init">
          <div v-if="active == 0" class="m-card" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">1/5</div>
            <div class="login-label">Información personal</div>

            <div class="form-wrapper">
              <el-form :model="personalFormData" class="cf">
                <m-form-item required label="Nombre" label-width="230px" :span="20" prop="name">
                  <m-input v-model="personalFormData.name" />
                </m-form-item>
                <m-form-item required label="Apellido paterno" label-width="230px" :span="20" prop="fatherName">
                  <m-input v-model="personalFormData.fatherName" />
                </m-form-item>
                <m-form-item required label="Apellido materno" label-width="230px" :span="20" prop="motherName">
                  <m-input v-model="personalFormData.motherName" />
                </m-form-item>
                <m-form-item required label="Sexo" label-width="230px" :span="20" prop="sex">
                  <m-select v-model="personalFormData.sex" :options="sexOptions" />
                </m-form-item>
                <m-form-item required label="Fecha de nacimiento" label-width="230px" :span="20" prop="birthday">
                  <m-date-picker type="date" value-format="yyyy-MM-dd" v-model="personalFormData.birthday" />
                </m-form-item>
                <m-form-item required label="DNI/NIE/PASSPORT" label-width="230px" :span="20" prop="idCardNo">
                  <m-input v-model="personalFormData.idCardNo" />
                </m-form-item>
                <m-form-item required label="Correo electrónico de contacto" label-width="230px" :span="20" prop="email">
                  <m-input v-model="personalFormData.email" />
                </m-form-item>
                <m-form-item required label="Contacto WA (WhatsApp)" label-width="230px" :span="20" prop="whatsApp">
                  <m-input v-model="personalFormData.whatsApp" />
                </m-form-item>
                <m-form-item label-suffix="" label="&nbsp;" label-width="230px" :span="20" prop="title">
                  <div class="action-btn" @click="saveKycPersonal"> Siguiente paso </div>
                </m-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="active == 1" class="m-card" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">2/5</div>
            <div class="login-label">Información familiar</div>

            <div class="form-wrapper">
              <el-form :model="familyFormData" class="cf">
                <m-form-item required label="Provincia" label-width="230px" :span="20" prop="province">
                  <m-select v-model="familyFormData.province" label-key="label" value-key="key" :options="provideOptions" />
                </m-form-item>
                <m-form-item required label=" Dirección específica" label-width="230px" :span="20" prop="address">
                  <m-input v-model="familyFormData.address" />
                </m-form-item>
                <m-form-item required label="Código postal" label-width="230px" :span="20" prop="zipCode">
                  <m-input v-model="familyFormData.zipCode" />
                </m-form-item>
                <m-form-item required label="Tipo de vivienda" label-width="230px" :span="20" prop="wayOfLiving">
                  <m-select v-model="familyFormData.wayOfLiving" :options="wayOfLivingOptions" />
                </m-form-item>
                <m-form-item required label="Estado civil" label-width="230px" :span="20" prop="marriage">
                  <m-select v-model="familyFormData.marriage" :options="marryOptions" />
                </m-form-item>
                <m-form-item required label="Número de hijos" label-width="230px" :span="20" prop="childCount">
                  <m-input-number v-model="familyFormData.childCount" />
                </m-form-item>
                <m-form-item required label="Número de otros familiares" label-width="230px" :span="20" prop="otherFamilyCount">
                  <m-input-number v-model="familyFormData.otherFamilyCount" />
                </m-form-item>
                <m-form-item required label="Otro contacto" label-width="230px" :span="20" prop="otherContact">
                  <m-input v-model="familyFormData.otherContact" />
                </m-form-item>
                <m-form-item label-suffix="" label="&nbsp;" label-width="230px" :span="20" prop="title">
                  <div class="action-btn" @click="saveKycFamily"> Siguiente paso </div>
                </m-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="active == 2" class="m-card" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">3/5</div>
            <div class="login-label">Información de antecedentes</div>

            <div class="form-wrapper">
              <el-form :model="extendFormData" class="cf">
                <m-form-item required label="Nivel educativo" label-width="230px" :span="20" prop="education">
                  <m-select v-model="extendFormData.education" :options="educationOptions" />
                </m-form-item>
                <m-form-item required label="Tipo de empleo" label-width="230px" :span="20" prop="workType">
                  <m-select v-model="extendFormData.workType" :options="workOptions" />
                </m-form-item>
                <m-form-item required label="Ingreso neto mensual" label-width="230px" :span="20" prop="residualIncomePerMonth">
                  <m-input-number v-model="extendFormData.residualIncomePerMonth" />
                </m-form-item>
                <m-form-item required label="Gasto mensual" label-width="230px" :span="20" prop="payoutPerMonth">
                  <m-input-number v-model="extendFormData.payoutPerMonth" />
                </m-form-item>
                <m-form-item required label="Mayor gasto" label-width="230px" :span="20" prop="topExpenses">
                  <m-select v-model="extendFormData.topExpenses" :options="topExpensesOptions" />
                </m-form-item>
                <m-form-item required label="Gastos en alimentación" label-width="230px" :span="20" prop="payoutOnDietPerMonth">
                  <m-input-number v-model="extendFormData.payoutOnDietPerMonth" />
                </m-form-item>
                <m-form-item required label="Motivo del préstamo" label-width="230px" :span="20" prop="loanPurpose">
                  <m-select v-model="extendFormData.loanPurpose" :options="purposeOptions" />
                </m-form-item>
                <m-form-item label-suffix="" label="&nbsp;" label-width="230px" :span="20" prop="title">
                  <div class="action-btn" @click="saveKycExtendInfo"> Siguiente paso </div>
                </m-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="active == 3" class="m-card" :class="{'is-mobile-card': flag.isMobile}" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">-/-</div>
            <div class="content">
              <!-- <img src="@/assets/img/icon.png" class="pic"> -->
              <div class="notice mb-2"> Esperando resultados, este proceso puede tardar unos segundos. </div>
              <!-- <div style="height: 50px" v-loading="true"></div> -->
              <!-- <div id="iframe-box" v-loading="flag.iframe"></div> -->
              <div class="iframe-box" v-loading="flag.iframe">
                <iframe ref="iframeItem" :src="iframeUrl" allow="camera https://integration.unnax.com" style="width:100%;height:100%" frameborder="0"></iframe>
              </div>
              <div class="action-btn" @click="retryFullIDWidget"> Reautenticación </div>
            </div>
          </div>
          <div v-if="active == 4" class="m-card" :class="{'is-mobile-card': flag.isMobile}" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">4/5</div>
            <div class="content">
              <div class="notice mb-2"> Esperando resultados, este proceso puede tardar unos segundos. </div>
              <!-- <div style="height: 50px" v-loading="true"></div> -->
              <div id="iframe-box" v-loading="flag.iframe"></div>
              <div class="info_container">
                <div class="info_container_title">Recordatorio Amistoso</div>
                <div class="info_container_content">
                  Necesitamos verificar la información de su cuenta bancaria para confirmar su historial de crédito. Esta cuenta se establecerá como su cuenta de pago predeterminada (puede cambiarse más adelante). Tenga la seguridad de que toda la información se mantendrá estrictamente confidencial. Aquí está el enlace a nuestra política de <a href="https://www.oneprestamos.com/home/privacy.html" target="_blank">privacidad</a>.
                </div>
              </div>
              <div class="action-btn" @click="retryPayAccountWidget"> Reautenticación </div>
            </div>
          </div>
          <div v-if="active == 5 && !flag.automatic" class="m-card" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">5/5</div>
            <div class="login-label">Información tarjeta</div>

            <div class="form-wrapper" v-loading="flag.auth">
              <el-form :model="authFormData" class="cf">
                <m-form-item required label="Nombre" label-width="70px" :span="20" prop="accountName">
                  <!-- <span>{{authFormData.accountName}}</span> -->
                  <m-input v-model="authFormData.accountName" />
                </m-form-item>
                <m-form-item required label="IBAN" label-width="230px" :span="20" prop="accountNo">
                  <m-input v-model="authFormData.accountNo" />
                </m-form-item>
                <m-form-item label-suffix="" label="&nbsp;" label-width="230px" :span="20">
                  <div class="action-btn" @click="savePayAccount"> Confirmar autorización </div>
                </m-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="flag.automatic" class="m-card" :class="{'is-mobile-card': flag.isMobile}" style="margin-top: 30px">
            <div class="step-num" v-if="flag.isMobile">5/5</div>
            <div class="content">
              <div class="notice mb-2"> Esperando resultados, este proceso puede tardar unos segundos. </div>
              <!-- <div style="height: 50px" v-loading="true"></div> -->
              <div id="iframe-box" v-loading="flag.iframe"></div>
              <div class="info_container">
                <div class="info_container_title">Recordatorio Amistoso</div>
                <div class="info_container_content">
                  Por favor, use una tarjeta de débito. La utilizaremos para activar el pago automático, de modo que pueda realizar sus pagos mensuales de manera conveniente. No haremos ningún cargo en su tarjeta antes de la fecha de pago del préstamo. Puede consultar nuestro Acuerdo de Credenciales en Archivo para obtener más <a href="/static/web/acuerdo_de_credenciales_en_archivo.html" target="_blank">detalles</a>.
                </div>
              </div>
              <div class="action-btn" @click="retryAuthorization"> Reautenticación </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-show="active == 3 || active == 4 || (flag.automatic && !flag.success)" class="iframe-box" v-loading="flag.iframe"></div> -->
  </div>
</template>

<script>
import Header from "@/components/layout/header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      active: 0,
      activeStep: 0,
      activeMap: new Map([
        [0, 0],
        [1, 1],
        [2, 2],
        [3, 3],
        [4, 3],
        [5, 4],
        [6, 4],
        [7, 4],
      ]),
      statusMap: new Map([
        [0, 0],
        [1, 1],
        [2, 2],
        [3, 4],
        [4, 4],
        [5, 5],
        [6, 6],
        [7, 6],
      ]),

      flag: {
        init: true,
        pending: false,
        auth: false,
        success: false,
        automatic: false,
        isMobile: false,
        iframe: false,
      },
      iframeUrl: '',

      dictList: ["wayOfLiving", "marry", "education", "work", "topExpenses", "purpose"],
      sexOptions: [
        {
          dictLable: "Hombre",
          dictKey: "M",
        },
        {
          dictLable: "Mujer",
          dictKey: "F",
        },
      ],
      provideOptions: [],
      cityOptions: [],
      wayOfLivingOptions: [],
      marryOptions: [],
      educationOptions: [],
      workOptions: [],
      topExpensesOptions: [],
      purposeOptions: [],

      // 个人信息
      personalFormData: {
        name: "",
        fatherName: "",
        motherName: "",
        sex: "",
        birthday: "",
        idCardNo: "",
        email: "",
        whatsApp: "",
      },
      // 家庭信息
      familyFormData: {
        province: "",
        address: "",
        zipCode: "",
        wayOfLiving: "",
        marriage: "",
        childCount: 0,
        otherFamilyCount: 0,
        otherContact: "",
      },
      // 背景信息
      extendFormData: {
        education: "",
        workType: "",
        residualIncomePerMonth: 0,
        payoutPerMonth: 0,
        topExpenses: "",
        payoutOnDietPerMonth: 0,
        loanPurpose: "",
      },
      // 授权信息
      authFormData: {},

      timer: {
        instance: null,
        flag: true,
      },
    };
  },
  created() {
    this.init();
    this.getDictProvince();
    this.getAllDict();

    const defaultInnerWidth = window.innerWidth;
    if (defaultInnerWidth < 992) {
      this.flag.isMobile = true;
    }
    var that = this;
    window.onresize = function () {
      const resizeInnerWidth = window.innerWidth;
      if (resizeInnerWidth < 992) {
        that.flag.isMobile = true;
      } else {
        that.flag.isMobile = false;
      }
    };
  },
  methods: {
    init() {
      this.flag.init = true;
      const userInfo = this.$state["USER_INFO"];
      if (!userInfo) {
        this.$router.replace({
          name: "Login",
        });
      } else {
        let { userStatus, accountStatus } = userInfo;
        if (userStatus != 10) {
          this.flag.success = true;
        }
        // accountStatus = 1
        this.activeStep = this.activeMap.get(accountStatus)
        const active = this.statusMap.get(accountStatus);
        if (active == 6) this.flag.automatic = true;
        this.active = active > 5 ? 5 : active;
        this.$nextTick(() => {
          this.flag.init = false;
        });
        if (this.active == 3) {
          this.initFullIDWidget();
        }
        if (this.active == 4) {
          this.initPayAccountWidget();
        }
        if (this.active == 5) {
          if (this.flag.automatic) {
            this.getAuthorizationLink();
          } else {
            this.getFinanceAccountList();
          }
        }
      }
    },
    // 更新kyc状态
    getUserInfo() {
      this.$http
        .post(this.$api.getUserInfo)
        .then((res) => {
          if (res.resultCode == 200) {
            this.$state["USER_INFO"] = res.data;
            this.init();
          }
          this.flag.init = false;
        })
        .catch(() => {
          this.flag.init = false;
        });
    },
    // 获取字典
    getDictProvince() {
      this.$http.post(this.$api.getDictProvince).then((res) => {
        if (res.resultCode == 200) {
          this.provideOptions = res.data.data.provinceList;
        }
      });
    },
    getAllDict() {
      this.dictList.forEach((el) => {
        this.$http.post(this.$api.getDictByParam + el).then((res) => {
          if (res.resultCode == 200) {
            this[el + "Options"] = res.data || [];
          }
        });
      });
    },

    // 提交数据
    getDictMarry() {},
    getDictPurpose() {},
    getDictWork() {},
    getDictEducation() {},

    // 保存
    validKycPersonalData() {
      return new Promise((resolve, reject) => {
        const { name, fatherName, motherName, sex, birthday, idCardNo, email, whatsApp } = this.personalFormData;
        if (!name) reject("Complete toda la información");
        if (!fatherName) reject("Complete toda la información");
        if (!motherName) reject("Complete toda la información");
        if (!sex) reject("Complete toda la información");
        if (!birthday) reject("Complete toda la información");
        if (this.$util.isAgeLessThan20(birthday) || this.$util.isAgeGreaterThan60(birthday)) reject("Tu edad no corresponde");
        if (!idCardNo) reject("Complete toda la información");
        if (!this.$util.validDNI(idCardNo)) reject("Proporciona la información correcta");
        if (!email) reject("Complete toda la información");
        if (!this.$util.validateEmail(email)) reject("Proporciona la información correcta");
        if (!whatsApp) reject("Complete toda la información");
        resolve();
      });
    },
    saveKycPersonal() {
      if (this.flag.init) return;
      this.validKycPersonalData()
        .then(() => {
          this.flag.init = true;
          this.$http
            .post(this.$api.saveKycPersonal, this.personalFormData)
            .then((res) => {
              if (res.resultCode == 200) {
                this.getUserInfo();
              } else {
                this.flag.init = false;
              }
            })
            .catch(() => {
              this.flag.init = false;
            });
        })
        .catch((err) => {
          this.$message.warning(err);
        });
    },
    validKycFamilyData() {
      return new Promise((resolve, reject) => {
        const { province, address, zipCode, wayOfLiving, marriage, childCount, otherFamilyCount, otherContact } = this.familyFormData;
        if (!province) reject("Complete toda la información");
        if (!address) reject("Complete toda la información");
        if (!zipCode) reject("Complete toda la información");
        if (!wayOfLiving) reject("Complete toda la información");
        if (!marriage) reject("Complete toda la información");
        if (!String(childCount)) reject("Complete toda la información");
        if (!String(otherFamilyCount)) reject("Complete toda la información");
        if (!otherContact) reject("Complete toda la información");
        if (!this.$util.validatePhone(otherContact)) reject("Proporciona la información correcta");
        resolve();
      });
    },
    saveKycFamily() {
      if (this.flag.init) return;
      this.validKycFamilyData()
        .then(() => {
          this.flag.init = true;
          this.$http
            .post(this.$api.saveKycFamily, this.familyFormData)
            .then((res) => {
              if (res.resultCode == 200) {
                this.getUserInfo();
              } else {
                this.flag.init = false;
              }
            })
            .catch(() => {
              this.flag.init = false;
            });
        })
        .catch((err) => {
          this.$message.warning(err);
        });
    },
    validKycExtendData() {
      return new Promise((resolve, reject) => {
        const { education, workType, residualIncomePerMonth, payoutPerMonth, topExpenses, payoutOnDietPerMonth, loanPurpose } = this.extendFormData;
        if (!education) reject("Complete toda la información");
        if (!workType) reject("Complete toda la información");
        if (!String(residualIncomePerMonth)) reject("Complete toda la información");
        if (!String(payoutPerMonth)) reject("Complete toda la información");
        if (!topExpenses) reject("Complete toda la información");
        if (!String(payoutOnDietPerMonth)) reject("Complete toda la información");
        if (!loanPurpose) reject("Complete toda la información");
        resolve();
      });
    },
    saveKycExtendInfo() {
      if (this.flag.init) return;
      this.validKycExtendData()
        .then(() => {
          this.flag.init = true;
          this.$http
            .post(this.$api.saveKycExtendInfo, this.extendFormData)
            .then((res) => {
              if (res.resultCode == 200) {
                this.getUserInfo();
              } else {
                this.flag.init = false;
              }
            })
            .catch(() => {
              this.flag.init = false;
            });
        })
        .catch((err) => {
          this.$message.warning(err);
        });
    },
    // 第三方
    clearTimer() {
      clearInterval(this.timer);
    },
    initFullIDWidget() {
      this.flag.iframe = true
      this.$http.post(this.$api.initFullIDWidget).then((res) => {
        if (res.resultCode == 200) {
          this.clearTimer();
          this.timer = setInterval(() => {
            this.checkFullIDResultTimer();
          }, 1000);
          if (res.data) {
            this.iframeUrl = res.data
            this.$refs['iframeItem'].onload = () => {
              this.flag.iframe = false
            }
            // this.$util.insertOrDestroyIframe(res.data, () => {
            //   this.flag.iframe = false
            // });
          }
        }
      })
    },
    checkFullIDResult() {
      if (this.flag.init) return;
      this.flag.init = true;
      this.$http
        .post(this.$api.checkFullIDResult)
        .then((res) => {
          if (res.resultCode == 200) {
            if (res.data) {
              this.getUserInfo();
            } else {
              this.$notify({
                title: "Consejos",
                message: "未获取到结果，请重试？",
                type: "warning",
              });
              this.flag.init = false;
            }
          } else {
            this.flag.init = false;
          }
        })
        .catch(() => {
          this.flag.init = false;
        });
    },
    checkFullIDResultTimer() {
      this.$http
        .post(this.$api.checkFullIDResult)
        .then((res) => {
          if (res.resultCode == 200) {
            if (res.data) {
              this.flag.iframe = false;
              this.getUserInfo();
              this.clearTimer();
            }
          }
        })
        .catch(() => {
          this.clearTimer();
        });
    },
    retryFullIDWidget() {
      this.initFullIDWidget();
    },
    initPayAccountWidget() {
      this.flag.iframe = true
      this.$http.post(this.$api.initPayAccountWidget).then((res) => {
        if (res.resultCode == 200) {
          this.clearTimer();
          this.timer = setInterval(() => {
            this.checkPayAccountResultTimer();
          }, 1000);
          if (res.data) {
            this.$util.insertOrDestroyIframe(res.data, () => {
              this.flag.iframe = false
            });
          }
        }
      });
    },
    checkPayAccountResult() {
      if (this.flag.init) return;
      this.flag.init = true;
      this.$http
        .post(this.$api.checkPayAccountResult)
        .then((res) => {
          if (res.resultCode == 200) {
            if (res.data) {
              this.getUserInfo();
            } else {
              this.$notify({
                title: "Consejos",
                message: "未获取到结果，请重试？",
                type: "warning",
              });
              this.flag.init = false;
            }
          } else {
            this.flag.init = false;
          }
        })
        .catch(() => {
          this.flag.init = false;
        });
    },
    checkPayAccountResultTimer() {
      this.$http
        .post(this.$api.checkPayAccountResult)
        .then((res) => {
          if (res.resultCode == 200) {
            if (res.data) {
              this.flag.iframe = false;
              this.getUserInfo();
              this.clearTimer();
            }
          }
        })
        .catch(() => {
          this.clearTimer();
        });
    },
    retryPayAccountWidget() {
      this.initPayAccountWidget();
    },
    // 银行卡授权
    getFinanceAccountList() {
      this.flag.auth = true;
      this.$http.post(this.$api.getFinanceAccountList).then((res) => {
        if (res.resultCode == 200) {
          if (res.data.length) {
            const { name: accountName, account: accountNo } = res.data[0];
            this.authFormData = {
              accountName,
              accountNo,
            };
          }
          this.flag.auth = false;
        }
      });
    },
    validPayAccountData() {
      return new Promise((resolve, reject) => {
        const { accountNo } = this.authFormData;
        if (!accountNo) reject("Complete toda la información");
        resolve();
      });
    },
    savePayAccount() {
      if (this.flag.pending) return;
      this.flag.pending = true;
      this.validPayAccountData()
        .then(() => {
          this.$http
            .post(this.$api.savePayAccount, this.authFormData)
            .then((res) => {
              if (res.resultCode == 200) {
                this.getUserInfo();
              }
              this.flag.pending = false;
            })
            .catch(() => {
              this.flag.pending = false;
            });
        })
        .catch((err) => {
          this.$message.warning(err);
        });
    },
    getAuthorizationLink() {
      this.flag.iframe = true
      this.$http.post(this.$api.getAuthorizationLink).then((res) => {
        if (res.resultCode == 200) {
          this.clearTimer();
          this.timer = setInterval(() => {
            this.checkAuthorizationTimer();
          }, 1000);
          if (res.data) {
            this.$util.insertOrDestroyIframe(res.data, () => {
              this.$nextTick(() => {
                this.flag.iframe = false
              })
            });
          }
        }
      })
    },
    checkAuthorizationTimer() {
      this.$http
        .post(this.$api.getUserInfo)
        .then((res) => {
          if (res.resultCode == 200) {
            if (res.data.userStatus == 20) {
              this.flag.iframe = false;
              this.$state["USER_INFO"] = res.data;
              this.$state["REFRESH_SIGN"] = true;
              this.flag.success = true;
              this.clearTimer();
            }
          }
        })
        .catch(() => {
          this.clearTimer();
        });
    },
    retryAuthorization() {
      this.getAuthorizationLink();
    },
    // 去借款
    jump2home() {
      this.$router.push({
        name: "Home",
      });
    },
  },
  beforeDestroy() {
    this.clearTimer();
  },
};
</script>

<style lang="scss" scoped>
.m-card {
  width: 80%;
  margin: auto;
  // border-radius: 24px;
  // background-color: #fff;
  padding: 60px 0px;
}
.login-label {
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 50px;
  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 187px;
    height: 3px;
    background-color: #fb563d;
  }
}
.form-wrapper {
  // margin: 30px 20px 20px;
  // text-align: center;
  .row {
    margin: 0 auto 8px;
    .label {
      font-size: 15px;
      float: left;
      width: 70px;
      line-height: 40px;
      margin-bottom: 6px;
    }
    .input {
      float: left;
      width: calc(100% - 104px);
      height: 46px;
      padding: 0 12px;
      border: 1px solid #e9e9e9;
      border-radius: 6px;
      &.valid {
        width: calc(100% - 108px);
      }
    }
    .send-btn {
      width: 100px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      color: #fb5341;
      background-color: #ffffff;
      border-radius: 6px;
      border: 1px solid #e9e9e9;
      margin-left: 8px;
      cursor: pointer;
      &.active {
        color: #ffffff;
        background-color: var(--c-theme);
      }
      .code-pic {
        width: 100%;
        height: 41px;
      }
    }
  }
  .login-btn {
    margin: 56px auto 0;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(to bottom, #fa5142, #ff7422);
    border-radius: 4px;
    cursor: pointer;
  }
  .notice {
    margin: 12px auto 20px;
    text-align: left;
    font-size: 14px;
    color: #999;
    line-height: 20px;
  }
  .register-btn {
    padding: 8px 0 10px;
    font-size: 12px;
    text-align: center;
    color: #999999;
  }
  .agreement-wrapper {
    font-size: 14px;
    margin-top: 16px;
    text-align: center;
    color: #999999;
    .check {
      padding: 6px 4px 10px 10px;
      width: 12px;
      height: 12px;
      margin-bottom: -11px;
      ::v-deep {
        .van-icon {
          font-size: 15px;
        }
      }
      &.active {
        color: var(--c-theme);
      }
    }
    .rule {
      color: var(--c-theme);
    }
  }
}
.highlight {
  color: #ff7422;
  cursor: pointer;
}
.action-btn {
  width: 100%;
  margin: 56px auto 0;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(to bottom, #fa5142, #ff7422);
  border-radius: 4px;
  cursor: pointer;
}
.content {
  text-align: center;
  .pic {
    width: 214px;
    height: 214px;
  }
  .notice {
    font-size: 30px;
  }
  .action-btn {
    width: 200px;
  }
}
.step-num {
  font-size: 30px;
  color: #ff7422;
  font-weight: 600;
  margin-top: -80px;
  text-align: center;
}
@media (min-width: 576px) {
  .m-card {
    max-width: 80%;
  }
}
@media (min-width: 768px) {
  .m-card {
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .m-card {
    max-width: 50%;
  }
}
@media (min-width: 1200px) {
  .m-card {
    max-width: 50%;
  }
}
@media (min-width: 1920px) {
  .m-card {
    max-width: 50%;
  }
}
#iframe-box, .iframe-box {
  width: 100%;
  height: calc(100vh - 62px);
  background-color: #f6f9fd;
}
.is-mobile-card {
  width: 100%;
  .notice {
    font-size: 24px;
  }
}

.info_container {
  &_title {
    font-size: 26px;
    padding: 20px 0 10px;
  }
  &_content {
    font-size: 18px;
    a {
      color: #ff7422;
    }
  }
}
</style>
